<template>
  <div>
    <el-card>
      <el-form
        ref="ruleFormRef"
        :model="form"
        status-icon
        :rules="rules"
        label-width="60px"
      >
        <el-row :gutter="24" >
          <el-col :span="8">
            <el-form-item label="订单号">
              <el-input type="text" v-model="form.id" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="价格" prop="password">
              <el-input type="text" v-model="form.price" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户id" prop="checkPass">
              <el-input type="text" v-model="form.userId" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="时间" prop="checkPass">
              <el-date-picker
                v-model="form.date"
                type="daterange"
                start-placeholder="Start date"
                end-placeholder="End date"
                :default-time="defaultTime"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row justify="end">
          <el-col
            :span="5"
          >
            <el-form-item>
              <el-button style="margin-right: 20px" type="primary" @click="submitForm(ruleFormRef)"
                >查询</el-button
              >
              <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <template #header>
        <div>
          <span>订单列表</span>
        </div>
      </template>
      <div class="table-container">
        <el-table :data="state.list" border stripe style="width: 100%">
          <el-table-column
            type="index"
            align="center"
            prop=""
            label=""
            width="50"
          >
          </el-table-column>
          <el-table-column prop="id" align="center" label="订单id" width="180">
          </el-table-column>
          <el-table-column prop="price" align="center" label="价格">
          </el-table-column>
          <el-table-column prop="userId" align="center" label="用户id">
          </el-table-column>
          <el-table-column
            prop="createTime"
            align="center"
            label="订单创建时间"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            align="center"
            label="订单更新时间"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            align="center"
            label="操作"
            width="150"
          >
            <template #default="scope">
              <el-button
                size="small"
                plain
                type="primary"
                @click="onEditStatus(scope.row.id)"
                >查看订单详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script setup>
//注意：vue3.x组合式api，需要在<script>里面使用setup
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
//导入axios实例(从封装的http.js中导入)
import http from "../../util/http.js";
const defaultTime = ref([new Date(2021, 1, 1), new Date(2026, 1, 1)]);

const form = ref({
  id: "",
  price: "",
  userId: "",
  date: ''
});
//使用一个reactive方法定义响应式对象
const state = reactive({
  //数据列表
  list: [],

  //控制对话框
  dialog: {
    title: "",
    show: false,
    option: "",
  },
  item: {},
});
const ruleFormRef = ref();
// 获取列表
const getOrderList = () => {
  http.get("/order/list").then((res) => {
    console.log(res);
    if (res.data.code === 200) {
      //更新表格
      state.list = res.data.data;
    }
  });
};

//生命周期钩子
onMounted(() => {
  getOrderList();
});

//响应修改按钮,打开修改对话框
const onEdit = (index) => {
  //获得要修改order的信息
  let order = state.list[index];
  //回填数据
  // state.mymodel = {
  //   id: user.id,
  //   username: user.username,
  //   password: user.password,
  //   email: user.email,
  //   status: user.status,
  // };
  //弹出注册对话框
  state.dialog = {
    title: "修改用户信息",
    show: true,
    option: "update",
  };
};

const submitForm = async (formEl) => {
  console.log(form.value);
  const res = await http.post("/order/list", form.value);
  console.log(res);
  if (res.data.code === 200) {
    // state.list = res.data.data;
  }
};
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  getOrderList()
  form.value = {};
};
</script>
<style scoped>
.table-container {
  text-align: right;
}
</style>

